<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding: 0;}
			.boss{
				width:428px;
				height:829px;background:#9cbc2b;
				padding:15px 21px;
			}
			h2{font-size:16px;font-weight:600;line-height: 39px;}
			div{width:400px;height:28px;border:2px solid #e0e9ba;
			border-radius:6px;background: #bad06b;line-height: 28px;margin: 0 auto;margin-bottom: 3px;
			padding:10px;}
			input[type="text"],input[type="email"],input[type="number"]{width:220px;height:28px;border-radius:4px;
			display:inline;border: 1px solid white;background: white;float:right;margin-right: 70px;padding-left:5px;
			font-style: italic;}
			.color::-webkit-input-placeholder{color:#b3afb0;}
		    span{float:left;display:inline;font-size: 12px;}
		    textarea{width:226px;height:96px;border-radius:4px;float:right;margin-right: 70px;}
		    /*input[type="redio"]{width: 12px;height:12px;}*/
		   p{margin-left: 16px;margin-top: 10px;}
		   h3{width:130px;height:37px;background:#374313;border-radius:20px;color: white;text-align: center;
		   line-height: 37px;margin: 0 auto;margin-bottom: 20px;margin-top: 10px;font-weight:500;}
		   input[type="radio"]{width:14px;height: 14px;}
		</style>
	</head>
	<body>
		<div class="boss">
			<h2>Step1:Your Details</h2>
			<div class="name">
				<span>Name</span> <input type="text" placeholder="first and last name" class="color"/>
			</div>
			
			<div class="email">
				<span>Email</span> <input type="email" class="color" placeholder="example@domain.com"/>
			</div>
			
			<div class="phone">
				<span>Phone</span> <input type="number" class="color" placeholder="eg.+447500000000"/>
			</div>
			
			<h2>Step2:Delivery Address</h2>
			<div class="address" style="height:100px;">
				<span>Address</span> <textarea></textarea>
			</div>
			<div class="postcode">
				<span>Postcode</span> <input type="text" class="color" />
			</div>
			<div class="country">
				<span>Country</span> <input type="text" class="color" />
			</div>
			
			<h2>Step1:Card details</h2>
			<div class="cardtype" style="height: 76px;">
				<span>Card type</span>
				<p style="margin: 35px;"><input type="radio" name="card type" style="margin-right: 20px;float: none;"><span style="margin-right: 30px;float: none;">Visa</span>
					<input type="radio" name="card type" style="margin-right: 20px;"/><span style="margin-right: 30px;float: none;">Amex</span>
					<input type="radio" name="card type" style="margin-right: 20px;"/><span style="margin-right: 30px;float: none;">Mastercard</span></p>
			</div>
			<div class="cardnumber">
				<span>Card number</span><input type="number" class="color" />
			</div>
			<div class="securitycode">
				<span>Security code</span><input type="number" class="color" />
			</div>
			<div class="nameoncard">
				<span>Name on card</span><input type="text" class="color" placeholder="exact name as on the card"/>
			</div>
			
			<h3>BUY IT!</h3>
		</div>
	</body>
</html>
